import type { JsonSchemas } from '@/components/cms/json-schema-form'
import type { SimpleGlobalProps, CommonGlobalProps, ListGlobalType } from '../base/arguments'
import { simpleGlobalDefaultProps, commonGlobalDefaultProps } from '../base/defaultProps'

import listTagsStyleTemplates from '../../../assets/list-tags'
import changesStyleTemplates from '../../../assets/change'
import loadingsTemplates from '../../../assets/loading'
import searchIconTemplates from '../../../assets/search-icons'
import { Image, Radio } from 'ant-design-vue'

export const simpleGlobal = (props: SimpleGlobalProps = simpleGlobalDefaultProps): JsonSchemas => {
  return [
    {
      tag: 'text',
      props: { class: 'setting-title', content: '应用主题色' }
    },
    {
      tag: 'form-item',
      props: {
        label: '全站配色',
        class: 'px-4'
      },
      child: { tag: 'color', field: props.primary }
    }
  ]
}

export const listGlobal = (
  props: CommonGlobalProps = commonGlobalDefaultProps,
  type: ListGlobalType = 'change'
): JsonSchemas => {
  const res = [...simpleGlobal()]
  const listSchemas: JsonSchemas = [
    { tag: 'divider' },
    { tag: 'text', props: { class: 'setting-title', content: '列表标签设置' } },
    {
      tag: 'form-item',
      props: {
        label: '选择样式',
        class: 'px-4'
      },
      child: {
        tag: 'radio-group',
        custom: false,
        field: props.tagStyle,
        iconTemplate: true,
        props: {
          class: 'block w-full flex flex-col'
        },
        slots: {
          default: () => {
            return (
              <div>
                {listTagsStyleTemplates.map((item, idx) => (
                  <div class="mb-2">
                    <Radio value={idx + 1} class="w-full text-left">
                      <span class="title">{item.label}</span>
                    </Radio>
                    <Image preview={false} src={item.icon} class="mt-2 h-5"></Image>
                  </div>
                ))}
              </div>
            )
          }
        }
      }
    }
  ]
  const changeSchemas: JsonSchemas = [
    { tag: 'divider' },
    { tag: 'text', props: { class: 'setting-title', content: '换一换按钮' } },
    {
      tag: 'form-item',
      props: {
        label: '显示',
        class: 'flex-row items-center px-4'
      },
      child: {
        field: props.change.style,
        tag: 'radio-group',
        props: {
          class: 'ml-8',
          options: [
            { label: '是', value: 1 },
            { label: '否', value: 0 }
          ]
        }
      }
    },
    {
      tag: 'form-item',
      props: {
        label: '选择样式',
        class: 'px-4'
      },
      child: {
        tag: 'radio-group',
        custom: false,
        iconTemplate: true,
        props: {
          class: 'block w-full flex flex-col'
        },
        slots: {
          default: () => {
            return (
              <>
                {changesStyleTemplates.map((item, idx) => (
                  <div class="mb-2">
                    <Radio value={idx + 1} class="w-full text-left">
                      <span class="title">{item.label}</span>
                    </Radio>
                    <Image preview={false} src={item.icon} class="mt-2"></Image>
                  </div>
                ))}
              </>
            )
          }
        }
      }
    }
  ]
  const loadingSchemas: JsonSchemas = [
    { tag: 'divider' },
    { tag: 'text', props: { class: 'setting-title', content: '列表底部提示语' } },
    {
      tag: 'form-item',
      props: {
        label: '文字内容',
        class: 'px-4'
      },
      child: { tag: 'input', field: props.footer.text, props: { placeholder: '请输入' } }
    },
    {
      tag: 'form-item',
      props: {
        label: '文字颜色',
        class: 'px-4'
      },
      child: { tag: 'color', field: props.footer.color, defaultValue: 'rgba(233,96,96,1)' }
    },
    { tag: 'divider' },
    { tag: 'text', props: { class: 'setting-title', content: '加载更多图标' } },
    {
      tag: 'form-item',
      props: {
        label: '样式图标：',
        class: 'px-4'
      },
      child: {
        tag: 'radio-group',
        field: props.loadIcon,
        custom: true,
        props: {
          class: 'flex items-center gap-x-16'
        },
        slots: {
          default: () => (
            <>
              {Object.keys(loadingsTemplates).map((item, idx) => (
                <Radio value={idx + 1} class="w-10 ">
                  <div class="icon w-9 h-9">
                    <Image preview={false} src={loadingsTemplates[item]}></Image>
                  </div>
                  <span class="title">模板{idx + 1}</span>
                </Radio>
              ))}
            </>
          )
        }
      }
    }
  ]

  const markMap: {
    [k in ListGlobalType]: () => void
  } = {
    change: () => res.push(...listSchemas, ...changeSchemas),
    'list-only': () => res.push(...listSchemas),
    loading: () => res.push(...loadingSchemas),
    'list-loading': () => res.push(...listSchemas, ...loadingSchemas)
  }
  markMap[type]()
  return res
}

export const searchBarGlobal = (props: CommonGlobalProps = commonGlobalDefaultProps): JsonSchemas => {
  return [
    ...simpleGlobal(props.simple),
    { tag: 'divider' },
    { tag: 'text', props: { class: 'setting-title', content: '搜索图标' } },
    {
      tag: 'form-item',
      props: {
        label: '更多图标',
        class: 'px-4'
      },
      child: {
        tag: 'radio-group',
        custom: true,
        field: props.searchIcon,
        props: {
          class: 'flex flex-row items-center justify-between'
        },
        slots: {
          default: () => (
            <>
              {searchIconTemplates.map((item) => (
                <Radio value={item.value} class="w-10 ">
                  <div class="icon w-9 h-9">
                    <Image preview={false} src={item.icon}></Image>
                  </div>
                  <span class="title">{item.label}</span>
                </Radio>
              ))}
            </>
          )
        }
      }
    }
  ]
}

export const globalsComponent = (props: CommonGlobalProps = commonGlobalDefaultProps): JsonSchemas => {
  return [
    { tag: 'text', props: { class: 'setting-title', content: '列表标签设置' } },
    {
      tag: 'form-item',
      props: {
        label: '样式选择',
        class: 'px-4'
      },
      child: {
        tag: 'radio-group',
        custom: false,
        iconTemplate: true,
        props: {
          class: 'block w-full flex flex-col'
        },
        slots: {
          default: () => {
            return (
              <div>
                {listTagsStyleTemplates.map((item, idx) => (
                  <div class="mb-2">
                    <Radio value={idx + 1} class="w-full text-left">
                      <span class="title">{item.label}</span>
                    </Radio>
                    <Image preview={false} src={item.icon} class="mt-2 h-5 ml-3"></Image>
                  </div>
                ))}
              </div>
            )
          }
        }
      }
    },
    { tag: 'divider' },
    { tag: 'text', props: { class: 'setting-title', content: '换一换按钮' } },
    {
      tag: 'form-item',
      props: {
        label: '按钮样式',
        class: 'px-4'
      },
      child: {
        tag: 'radio-group',
        custom: false,
        iconTemplate: true,
        props: {
          class: 'block w-full flex flex-col'
        },
        slots: {
          default: () => {
            return (
              <>
                {changesStyleTemplates.map((item, idx) => (
                  <div class="mb-2">
                    <Radio value={idx + 1} class="w-full text-left">
                      <span class="title">{item.label}</span>
                    </Radio>
                    <Image preview={false} src={item.icon} class="mt-2"></Image>
                  </div>
                ))}
              </>
            )
          }
        }
      }
    },
    { tag: 'divider' },
    { tag: 'text', props: { class: 'setting-title', content: '加载更多图标' } },
    {
      tag: 'form-item',
      props: {
        label: '样式图标：',
        class: 'px-4'
      },
      child: {
        tag: 'radio-group',
        custom: true,
        props: {
          class: 'flex items-center gap-x-16'
        },
        slots: {
          default: () => (
            <>
              {Object.keys(loadingsTemplates).map((item, idx) => (
                <Radio value={idx + 1} class="w-10 ">
                  <div class="icon w-9 h-9">
                    <Image preview={false} src={loadingsTemplates[item]}></Image>
                  </div>
                  <span class="title">模板{idx + 1}</span>
                </Radio>
              ))}
            </>
          )
        }
      }
    },
    { tag: 'divider' },
    { tag: 'text', props: { class: 'setting-title', content: '列表底部提示语' } },
    {
      tag: 'form-item',
      props: {
        label: '文字内容',
        class: 'px-4'
      },
      child: { tag: 'input', field: props.footer.text, props: { placeholder: '请输入' } }
    },
    {
      tag: 'form-item',
      props: {
        label: '文字颜色',
        class: 'px-4'
      },
      child: { tag: 'color', field: props.footer.color, defaultValue: 'rgba(233,96,96,1)' }
    },
    { tag: 'divider' },
    { tag: 'text', props: { class: 'setting-title', content: '应用主题色' } },
    {
      tag: 'form-item',
      props: {
        label: '文字颜色',
        class: 'px-4'
      },
      child: { tag: 'color', field: props.primaryTextColor, defaultValue: 'rgba(233,96,96,1)' }
    }
  ]
}
